<template>
  <div class="rank_container">
    <p class="title">排行榜</p>
    <ul>
      <li class="item"
        v-for="item in topList" :key="item.id"
        @click="showRank(item.id)">
        <div class="media">
          <img v-lazy="item.picUrl">
          <span class="listen_count">{{ item.listenCount | listenCount }}</span>
        </div>
        <div class="info">
          <p class="rank_title">{{ item.topTitle }}</p>
          <p class="rank_songs"
            v-for="(song, index) in item.songList" :key="index">
            {{ index+1 }} 
            {{ song.songname }} 
            <span class="singername">-{{ song.singername }}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'

export default {
  name: 'rank',
  created() {
    this.$store.dispatch('getRankList').then(res => {
      if(res.data.code == 0) {
        this.topList = res.data.data.topList
      }else {
        Toast('服务器连接失败')
      }
    })
  },
  data() {
    return {
      topList: null
    }
  },
  methods: {
    showRank(id) {
      this.$router.push({
        name: 'rank',
        params: { id }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .rank_container {
    width: 100%;
    height: 100%;
    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      font-size: 16px;
      color: #000;
      text-align: center;
    }
    ul {
      margin-top: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      list-style: none;
      .item {
        height: 100px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 5px;
        box-shadow: 0 0 10px #ddd;
        overflow: hidden;
        display: flex;
        cursor: pointer;

        .media {
          position: relative;
          img {
            width: 100px;
            height: 100px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            -webkit-user-drag: none;
          }
          .listen_count {
            position: absolute;
            left: 5px;
            bottom: 3px;
            font-size: 12px;
            color: #fff;
          }
        }
        .info {
          padding: 5px 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          overflow: hidden;
          .rank_title {
            font-size: 16px;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0;
          }
          .rank_songs {
            font-size: 15px;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0;
            .singername {
              color: #8f8f8f;
            }
          }
        }
      }
    }
  }
</style>
